<script setup lang="ts">
import { ColumnsType } from 'ant-design-vue/es/table';
import { h } from 'vue'
const antIcons: any = inject('antIcons')
import { UserOnlineRes, getUserOnlineApi, kickUserApi, KickRes } from '@/api/security'
import { SysUserOnline } from '@/interface/user';
import { message } from "ant-design-vue";
import { DeleteOutlined } from '@ant-design/icons-vue';
import { useGlobalStore } from '@/store/globalStore';

const columns: ColumnsType<any> = [
  {
    title: '会话编号',
    dataIndex: 'tokenId',
    key: 'tokenId',
    ellipsis: true,
  },
  {
    title: '登录用户',
    dataIndex: 'loginName',
    key: 'loginName',
  },
  {
    title: '部门名称',
    dataIndex: 'deptName',
    key: 'deptName',
  },
  {
    title: '主机',
    dataIndex: 'ipAddr',
    key: 'ipAddr',
  },
  {
    title: '地址',
    dataIndex: 'ipLocation',
    key: 'ipLocation',
  },
  {
    title: '登陆日期',
    dataIndex: 'loginTime',
    key: 'loginTime',
    ellipsis: true,
  },
  {
    title: '操作',
    key: 'operation',
    fixed: 'right',
    width: 100,
  },
];

const globalStore = useGlobalStore()

const data = ref<SysUserOnline[]>([])

const contentBoxRef = ref<HTMLElement>()
const currentPage = ref<number>(1);
const size = ref<number>(10);
const total = ref<number>(0);
const isLoading = ref<boolean>(false);
const searchValue = ref('')

const tableStyle = reactive<{
  width: number,
  height: number
}>({
  width: 300,
  height: 300
})

const getUserOnline = async (isSearch = false) => {
  isLoading.value = true;
  data.value = []
  if (isSearch) {
    pageChanged(1, size.value)
    return
  }
  try {
    const { data: res }: { data: UserOnlineRes } = await getUserOnlineApi(searchValue.value)
    total.value = res.data.length
    //key用于选中操作
    data.value = res.data.map((item: SysUserOnline) => {
      item.key = item.tokenId
      return item
    })
  } catch (error) {

  } finally {
    isLoading.value = false;
  }
}

const pageChanged = (page: number, pageSize: number) => {
  currentPage.value = page
  size.value = pageSize
  getUserOnline()
}

const reloadData = () => {
  getUserOnline()
}

const resetData = () => {
  searchValue.value = ''
  pageChanged(1, 10)
}

const kickUser = async (text: SysUserOnline) => {
  const { data: res }: { data: KickRes } = await kickUserApi(text.userId as number)
  if (res.code === 200) {
    message.success(res.msg)
    getUserOnline(false)
  } else {
    message.error(res.msg)
  }
}

onMounted(() => {
  getUserOnline()
  tableStyle.height = contentBoxRef.value?.clientHeight as number - 500
  tableStyle.width = contentBoxRef.value?.clientWidth as number
})
</script>
<template>
  <div class="box-border relative w-full h-full p-3" ref="contentBoxRef"
    :style="{ width: globalStore.isMobile ? 'calc(100% - 60px)' : '100%' }">
    <a-row>
      <a-col :span="24">
        <a-space class="flex flex-wrap">
          <a-input placeholder="登录用户" class="w-[230px]" v-model:value="searchValue"
            @keydown.enter="getUserOnline(true)" />
          <a-button type="primary" class="flex items-center bg-primary-2" :icon="h(antIcons['SearchOutlined'])"
            @click="getUserOnline(true)" :loading="isLoading">查询</a-button>
          <a-button class="flex items-center" :icon="h(antIcons['ReloadOutlined'])" @click="resetData">重置</a-button>
          <a-button class="flex items-center justify-center" :icon="h(antIcons['ReloadOutlined'])" shape="circle"
            @click="reloadData"></a-button>
        </a-space>
      </a-col>
    </a-row>
    <!-- 表格 -->
    <div class="mt-3  h-fit max-h-[647px]">
      <a-table :columns="columns" :data-source="data" :pagination="{
      current: currentPage,
      pageSize: size,
      showQuickJumper: true
    }" :loading="isLoading"
        :scroll="{ y: tableStyle.height, x: globalStore.isMobile ? 'calc(100% + 800px)' : '100%' }">
        <template #bodyCell="{ column, text }">
          <template v-if="column.dataIndex === 'sex'">
            <p>{{ text == '1' ? '男' : '女' }}</p>
          </template>
          <template v-if="column.key === 'operation'">
            <a-space>
              <a-popconfirm :title="`确定强退${text.loginName}吗?`" ok-text="确认" cancel-text="取消"
                :okButtonProps="{ type: 'default' }" @confirm="kickUser(text)">
                <!-- <template #okButton>
                  <a-button size="small" type="primary" class="bg-primary-2" @click="deleteData(text.userId)">确认</a-button>
                </template> -->
                <a-button type="primary" class="flex items-center bg-primary-2" size="small">
                  <template #icon>
                    <DeleteOutlined />
                  </template>
                  强退
                </a-button>
              </a-popconfirm>
            </a-space>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<style scoped></style>